<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue'
	import { sexList, clothesSize, signUpType } from '@/utils/basicData'
	import switchRadio from '@/components/switchRadio/suitchRadio.vue'
	import inputNumber from '@/components/inputNumber/inputNumber.vue'
	import uploadImage from '@/components/uploadImage/index.vue'
	import { getGroupList } from '@/api/match'
	import { useStore } from "vuex"
	import { getCertificationInfo } from '@/api/user'
	import { getMatchList, getTeamAll } from '@/api/team'
	import { getCityData } from '@/api/basisData'
	import selectPicker from '@/components/selectPicker/index.vue'

	const store = useStore()
	const props = defineProps({
		info: {
			type: Object
		},
	})
	const signFrom = ref<any>(props.info)

	const show = computed(() => {
		return signFrom.value.regType == "SPORTS_MAN";
	})
	const imgShow = ref(false);

	const teamGroup = ref([])
	const gameGroup = ref([])
	const matchList = ref([])
	const areaList = ref([])
	let province = "";
	let city = "";
	let district = "";
	onMounted(() => {
		getMatchList().then(res => {
			if (res.code == 200) {
				matchList.value = res.data.map(item => {
					return {
						...item,
						value: item.id,
						text: item.name
					}
				})
			}
		})
		getGroupList().then(res => {
			if (res.code == 200) {
				gameGroup.value = res.data.map(item => {
					return {
						...item,
						value: item.id,
						text: item.name,
					}
				})
			}
		})
		getCertificationInfo({ openid: store.state.user.openId }).then(res => {
			console.log(res);
			if (res.code == 200) {
				signFrom.value.competeName = res.data.name;
				signFrom.value.idCard = res.data.idCard;
				signFrom.value.sex = res.data.sex == "男" ? "MAN" : "WOMEN";
				signFrom.value.age = res.data.age;
			}
		})
		getCityData().then(res => {
			if (res.code == 200) {
				areaList.value = res.data.filter(item => item.code == "510000");
			} else {
				areaList.value = []
			}
		}).catch(err => {
			areaList.value = []
		})
	})

	const areaList1 = computed(() => {
		if (signFrom.value.level == "1") {
			// 市级
			const data : any = areaList.value[0];

			return [{
				...data,
				children: data.children.map(item => {
					return {
						...item,
						children: []
					}
				})
			}];
		} else {
			return areaList.value;
		}
	})
	const changeGroup = (val) => {
		// 获取球队名称
		const group = gameGroup.value.find(item => item.id == val);
		if (group) {
			signFrom.value.gameGroupName = group.name;
		}
		if (val && signFrom.value.eventId) {
			getTeamAll({ groupId: val, gameId: signFrom.value.eventId, provinceCode: province, cityCode: city, districtCode: district }).then(res => {
				if (res.code == 200) {
					teamGroup.value = res.data.map((item : any, index : any) => {
						return {
							value: item.id,
							text: item.name
						}
					})
				}
			});
		} else {
			teamGroup.value = [];
		}

	}

	const changeMatch = (val) => {
		// 获取球队名称
		const match = matchList.value.find(item => item.id == val);
		if (match) {
			if (signFrom.value.regType == "SPORTS_MAN") {
				signFrom.value.regFee = match.orderAmount;
				signFrom.value.insuranceFee = match.orderRealAmount;
			} else {
				signFrom.value.regFee = 0;
				signFrom.value.insuranceFee = 0;
			}

			signFrom.value.level = match.level;
			// signFrom.value.levelStr = match.level == 1 ? "市（州）" : "县（市区）"
			signFrom.value.eventName = match.text;
		}
		if (val && signFrom.value.gameGroupId) {
			getTeamAll({ gameId: val, groupId: signFrom.value.gameGroupId, provinceCode: province, cityCode: city, districtCode: district }).then(res => {
				if (res.code == 200) {
					teamGroup.value = res.data.map((item : any, index : any) => {
						return {
							value: item.id,
							text: item.name
						}
					})
				}
			});

		} else {
			teamGroup.value = [];
		}

	}

	const changeArea = (e) => {
		province = e.idList[0].value
		city = e.idList[1].value;
		if (signFrom.value.level == "1") {
			district = "";
		} else {
			district = e.idList[2].value;
		}
		if (signFrom.value.eventId && signFrom.value.gameGroupId) {
			getTeamAll({ gameId: signFrom.value.eventId, groupId: signFrom.value.gameGroupId, provinceCode: province, cityCode: city, districtCode: district }).then(res => {
				if (res.code == 200) {
					teamGroup.value = res.data.map((item : any, index : any) => {
						return {
							value: item.id,
							text: item.name
						}
					})
				}
			});

		} else {
			teamGroup.value = [];
		}
	}
	// 打开尺码表弹窗
	const openSize = () => {
		imgShow.value = true
	}
	const changeIdCard = (val) => {
		if (val.detail.value) {
			const age = getAgeFromIDCard(val.detail.value)
			signFrom.value.age = age;
			signFrom.value.sex = getGenderFromIDCard(val.detail.value)
		} else {
			signFrom.value.age = 0;
		}

	}

	function getGenderFromIDCard(idCard) {
		// 验证身份证号格式（18位）
		if (!/^\d{17}(\d|X)$/i.test(idCard)) {
			return "无效的身份证号码";
		}

		// 获取第 17 位字符（性别位）
		const genderDigit = parseInt(idCard.charAt(16), 10);

		// 判断性别
		return genderDigit % 2 === 0 ? "WOMEN" : "MAN";
	}

	function getAgeFromIDCard(idCard) {
		// 验证身份证号是否为有效的 18 位数字或带 X 的字符串
		if (!/^\d{17}(\d|X)$/i.test(idCard)) {
			return "无效的身份证号码";
		}

		// 从身份证号中提取出生日期
		const birthYear = parseInt(idCard.substr(6, 4)); // 年
		const birthMonth = parseInt(idCard.substr(10, 2)); // 月
		const birthDay = parseInt(idCard.substr(12, 2)); // 日

		// 获取当前日期
		const today = new Date();
		const currentYear = today.getFullYear();
		const currentMonth = today.getMonth() + 1; // 月份从 0 开始
		const currentDay = today.getDate();

		// 计算年龄
		let age = currentYear - birthYear;

		// 判断是否已过生日，未过则年龄减 1
		if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
			age--;
		}

		return age;
	}

	const regChange = (val) => {
		if (val == "SPORTS_MAN") {
			const match = matchList.value.find(match => match.id == signFrom.value.eventId);
			if (match) {
				signFrom.value.regFee = match.orderAmount;
				signFrom.value.insuranceFee = match.orderRealAmount;
			}
		} else {
			signFrom.value.regFee = 0;
			signFrom.value.insuranceFee = 0;
		}
	}
</script>

<template>
	<view class="sign-body">
		<view class="sign-item">
			<view class="sign-label required">赛事级别</view>
			<view class="sign-value">
				<uni-data-select class="text-align-left" width="100%" v-model="signFrom.eventId" @change="changeMatch"
					:localdata="matchList" placeholder="请选择赛事级别"></uni-data-select>
			</view>
		</view>
		<view v-if="signFrom.eventId" class="sign-item">
			<view class="sign-label required">级别全称</view>
			<view class="sign-value">
				<view class="">
					{{signFrom.eventName}}
				</view>
			</view>
		</view>
	</view>
	<view class="sign-body">
		
		<view class="sign-item">
			<view class="sign-label required">组别</view>
			<view class="sign-value">
				<uni-data-select class="text-align-left" width="100%" v-model="signFrom.gameGroupId"
					@change="changeGroup" :localdata="gameGroup" placeholder="请选择组别"></uni-data-select>
			</view>
		</view>
		<view v-if="signFrom.gameGroupId" class="sign-item">
			<view class="sign-label required">组别全称</view>
			<view class="sign-value">
				<view class="">
					{{signFrom.gameGroupName}}
				</view>
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label">地区</view>
			<view class="sign-value">
				<select-picker :cascade="true" :map="{text:'name',
				value:'code'}" v-model="signFrom.area" :columns="areaList1" @change="changeArea($event)" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">球队</view>
			<view class="sign-value">
				<uni-data-select v-model="signFrom.gameTeamId" :localdata="teamGroup"
					placeholder="请选择球队"></uni-data-select>
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">报名类型</view>
			<view class="sign-value">
				<uni-data-select v-model="signFrom.regType" :localdata="signUpType" @change="regChange"
					placeholder="请选择报名类型"></uni-data-select>
			</view>
		</view>
	</view>
	<view class="sign-body">
		<view class="sign-item">
			<view class="sign-label required">姓名</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.competeName" placeholder="请输入姓名" />
			</view>
		</view>
		<view v-if="show" class="sign-item">
			<view class="sign-label required">球员号码</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.uniformNumber" placeholder="请输入球员号码" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">身份证号码</view>
			<view class="sign-value">
				<input type="idcard" v-model="signFrom.idCard" placeholder="请输入身份证号码" @change="changeIdCard" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">性别</view>
			<view class="sign-value">
				<switch-radio v-model="signFrom.sex" :list="sexList" :disabled="true" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">年龄</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.age" placeholder="请输入年龄" disabled />
			</view>
		</view>
		<view v-if="show" class="sign-item center">
			<view class="sign-label required">身高(cm)</view>
			<view class="sign-value">
				<input-number v-model="signFrom.height" unit="cm" :negative="true" />
			</view>
		</view>

		<view v-if="show" class="sign-item center">
			<view class="sign-label required">体重(kg)</view>
			<view class="sign-value">
				<input-number v-model="signFrom.weight" unit="kg" :negative="true" />
			</view>
		</view>

		<view v-if="show" class="sign-item">
			<view class="sign-label required">衣服尺码</view>
			<view class="sign-value">
				<uni-data-select v-model="signFrom.clothingSize" :localdata="clothesSize"
					placeholder="请选择衣服尺码"></uni-data-select>
			</view>

		</view>
		<view v-if="show" class="check-btn" @click="openSize">查看尺码表</view>
	</view>
	<view class="sign-body">
		<view class="sign-item">
			<view class="sign-label required">联系电话</view>
			<view class="sign-value">
				<input type="number" v-model="signFrom.phone" placeholder="请输入联系电话" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">紧急联系人</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.emContact" placeholder="请输入紧急联系人" />
			</view>
		</view>

		<view class="sign-item">
			<view class="sign-label required">紧急电话</view>
			<view class="sign-value">
				<input type="number" v-model="signFrom.emPhone" placeholder="请输入紧急联系电话" />
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">个人照片</view>
			<view class="sign-value">
				<upload-image :max-count="1" v-model="signFrom.photo" />
			</view>
		</view>
		<view v-if="signFrom.regType !='SPORTS_MAN'" style="height: 40rpx">

		</view>
	</view>
	<view v-if="signFrom.regType=='SPORTS_MAN'" class="sign-body">
		<view class="sign-item">
			<view class="sign-label required">报名费</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.regFee" disabled>
			</view>
			<view v-if="signFrom.level=='1'" class="tips">
				包含两套比赛服装
			</view>
		</view>
		<view class="sign-item">
			<view class="sign-label required">保险费</view>
			<view class="sign-value">
				<input type="text" v-model="signFrom.insuranceFee" disabled />
			</view>
		</view>
		<view class="notice-content">
			<view class="content">
				<view>保险保障内容：</view>
				<view>意外身故及残疾保障 100000元</view>
				<view>意外医疗(无免赔额) 20000元</view>
				<view>猝死保障 100000元</view>
				<view>意外伤害住院补贴(30天) 80元/天</view>
				<view>公共交通意外伤害-飞机 50000元</view>
				<view>公共交通意外伤害-轮船 50000元</view>
				<view>公共交通意外伤害-火车(地铁、轻轨) 50000元</view>
				<view>公共交通意外伤害-汽车 50000元</view>
			</view>
		</view>
		<view style="height: 40rpx">

		</view>
	</view>
	<up-overlay :show="imgShow" @click="imgShow = false">
		<view class="wrap">
			<view class="rect" @tap.stop>
				<image class="size-img" :src="`${$Prefix}/mini/static/icons/chima.png`" mode="widthFix" />
			</view>
		</view>
	</up-overlay>
</template>

<style scoped lang="scss">
	.sign-body {
		margin: 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		position: relative;

		.sign-item {
			padding: 24rpx 0;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;

			&.start-item {
				align-items: flex-start;
			}

			&:last-child {
				border-bottom: none;
			}

			.tips {
				position: absolute;
				right: 0rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: normal;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 0.4);
				line-height: 36rpx;
				text-align: right;
				font-style: normal;
			}

			.sign-label {
				color: #505363;
				font-size: 28rpx;
				width: 160rpx;

				&.required {
					position: relative;
					padding-left: 20rpx;

					&:before {
						content: '*';
						display: block;
						position: absolute;
						color: #ff3c3c;
						top: 0;
						left: 0;
					}
				}
			}

			.sign-value {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
				color: #21252E;
				font-weight: 500;

				input {
					width: 100%;
					font-weight: 500;
				}

				textarea {
					background-color: #F7F7F7;
					border-radius: 12rpx;
					box-sizing: border-box;
					font-weight: 500;
					width: 100%;
					padding: 10rpx;
					height: 150rpx;
				}
			}
		}

		.check-btn {
			color: #1677FE;
			font-size: 28rpx;
			text-align: right;
			padding-top: 10rpx;
		}

		.notice-content {
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 24rpx 20rpx 20rpx;

			.content {
				font-family: OPPOSans, OPPOSans;
				font-weight: normal;
				font-size: 24rpx;
				color: #999999;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.size-img {
		width: 100%;
		top: 500rpx;
		position: absolute;
	}
</style>